<template>
  <div class="container">
    <div class="panel">
      <input class="input" type="text" v-model="content" placeholder="总要写点什么吧...">
      <button class="button success" @click="handleCreate">创建</button>
    </div>
    <ul class="todos">
      <li class="todo" v-for="todo in reverseTodos" :key="todo.id">
        <span class="content">{{ todo.content }}</span>
        <button @click="handleRemove(todo)">移除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'ToDo',
  data(){
    return {
      id: 0,
      content: "",
      todos: []
    }
  },
  computed: {
    reverseTodos(){
      return this.todos.slice(0).reverse();
    }
  },
  methods: {
    handleCreate(){
      const todo = {
        id: this.id++,
        content: this.content,
        time: new Date().getTime()
      }
      this.todos.push(todo);
      this.content = "";
    },
    handleRemove(todo){
      this.todos.splice(this.todos.indexOf(todo),1);
    }
  }
}
</script>
<style scoped>
.container {
  width: 100%;
}

.panel {
  display: flex;
  flex-direction: row;
}
.panel > * {
  margin-right: 5px;
}

.panel > :last-child {
  margin-bottom: 0;
}

.input {
  border: 2px solid #41b883;
  border-radius: 4px;
  outline: none;
  height: 32px;
  width: 100%;
  padding: 0 12px;
}

.input:focus {
  outline: none;
}

.button {
  border: 1px solid #41b883;
  border-radius: 4px;
  background-color: transparent;
  padding: 10px 20px;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: .1s;
  user-select: none;
}

.button.success {
  background-color: #41b883;
  color: #FFFFFF;
} 


.todos {
  padding: 20px 0;
  list-style: none;
  box-sizing: border-box;
}

.todo {
  display: flex;
  flex-direction: row;
  border: none;
  padding: 12px;
  margin-bottom: 8px;
  background-color: #f2f3f5;
  border-radius: 4px;
}

.todo .content {
  flex: 1;
}
</style>
